<template>
  <div class="filter-more">
    <div class="from_header">
      <el-form ref="form" label-width="120px">
        <el-form-item label="名称：">
          <el-input v-model="searchInfo.name" size="small" placeholder="请输入名称"/>
        </el-form-item>
      </el-form>

      <div class="establish">
        <el-button :disabled="disabledNewly" type="primary" size="small" @click="newly">新增</el-button>
        <el-button type="primary" size="small" @click="selected">查询</el-button>
        <el-button plain size="small" @click="reset">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
// import { Message } from 'element-ui';

export default {
  model: {
    prop: 'searchInfo'
  },
  props: {
    disabledNewly: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      searchInfo: {
        name: ''
      }
    }
  },
  mounted() {
  },
  methods: {
    selected() {
      this.$emit('selected', this.searchInfo)
    },
    // 重置
    reset() {
      this.searchInfo = {
        name: ''
      }
      this.selected()
    },
    // 新增弹框
    newly() {
      this.$emit('add')
    }
  }
}
</script>

<style scoped lang="scss">
.filter-more {
  // width: 90%;
  // margin: 0 auto;
  display: flex;
  flex-direction: column;
  // background: #ccc;
  // border: 1px solid #e8f4fd;
  // padding: 25px 15px;
  .from_header {
    width: 100%;
    height: 100%;

    .el-form-item {
      margin: 10px 30px;
    }

    .el-form {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    /deep/ .el-form-item__content {
      display: flex;
    }
  }
  .establish {
    float: right;
  }
}
</style>
